import { Form, Input, Button } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LoadingOutlined } from '@ant-design/icons';
const EditUser = () => {
    const link = useNavigate();
    const [userForm] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const onSave = (values: { firstName: string; lastName: string }) => {
        //
    };
    const userId = sessionStorage.getItem('userId');
    return (
        <div className="page-main user-details">
            <div className="user-header">
                <div className="user-header-title">Individual user</div>
                <div className="user-header-text">
                    <span onClick={() => link('/user')}>User Management</span>
                    {` > `}
                    <span onClick={() => link('/user/detail')}>{userId}</span>
                    {` > Edit`}
                </div>
            </div>
            <div className="container">
                <div className="user-events">
                    <Button className="save-btn" onClick={() => userForm.submit()}>
                        Save{loading && <LoadingOutlined />}
                    </Button>
                </div>
                <div className="user-card" style={{ columnGap: 111 }}>
                    <div className="user-pic"></div>
                    <Form
                        name="edit-user-form"
                        className="edit-user-form"
                        form={userForm}
                        layout="vertical"
                        onFinish={onSave}
                        validateTrigger="onBlur"
                        autoComplete="off"
                    >
                        <Form.Item
                            label="First name"
                            name="firstName"
                            rules={[{ required: true, message: 'Please type first name!' }]}
                        >
                            <Input className="default_input" maxLength={20} />
                        </Form.Item>
                        <Form.Item
                            label="Last name"
                            name="lastName"
                            rules={[{ required: true, message: 'Please type last name!' }]}
                        >
                            <Input className="default_input" maxLength={20} />
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
};
export default EditUser;
